<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="域叶">
    <title>幸运大转盘</title>
    <link rel="stylesheet" href="./alert.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .preloadImg1 {
            background-image: url(./wheel-bg.png);
        }

        .preloadImg2 {
            background-image: url(./wheel-bg2.png);
        }

        .container {
            background-image: url(./wheel-bodybg.png);
            background-size: 100% 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wheel {
            width: 800px;
            height: 800px;
            position: relative;
            background-image: url(./wheel-bg.png);
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wheel-light {
            background-image: url(./wheel-bg2.png) !important;
        }

        #wheelCanvas {
            /* width: 700px;
            height: 700px; */

        }

        .transition {
            transition: all 2s;
        }

        .pointer {
            display: block;
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: transparent;
            background-image: url(./wheel-pointer.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            border: none;
            outline: none;
        }

        .pointer-animation {
            animation: scale 1s infinite linear alternate;
        }

        @keyframes scale {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.1);
            }
        }
    </style>
</head>

<body>
    <div class="preloadImg1"></div>
    <div class="preloadImg2"></div>
    <div class="container">
        <div class="wheel">
            <canvas id="wheelCanvas" width="600px" height="600px"></canvas>
            <button class="pointer pointer-animation" id="getAward"></button>
        </div>
    </div>
</body>
<script src="./alert.js"></script>
<script>
    //抽奖转盘
    var turnWheel = {
        reaward: [
            { name: '沙雕老二达', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065206471_siCEaEpi.jpg' },
            { name: '憨憨狐狸', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065297220_maYiZc27.jpg' },
            { name: '鸡太美阿坤', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065313260_JDMZ2GTW.jpg' },
            { name: '色情狂魔辉', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065328906_azt6pQD2.jpg' },
            { name: '海王牛头人', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065383539_rBYtb5BJ.jpg' },
            // { name: '高冷男神流川', icon: 'http://mdhw.oss-cn-hangzhou.aliyuncs.com/goods/1652065369843_rny7mahE.jpg' },
        ], //转盘奖品
        colors: [], //转盘奖品区块对应背景颜色
        fontColor: '#8C42E9', //转盘奖品字体颜色
        radius: 300, //转盘半径
        textRadius: 320, //转盘奖品位置距离圆心的距离
    };

    var timer = null;
    var turning = false;
    var wheelCanvas = document.getElementById("wheelCanvas");

    turnWheel.reaward = turnWheel.reaward.map(d => {
        let img = new Image();
        img.src = d.icon;
        d.iconImg = img
        return d
    })
    turnWheel.colors = [
        "#eecffe",
        "#FFFFFF",
        "#eecffe",
        "#FFFFFF",
        "#eecffe",
        "#FFFFFF",
    ];
    window.onload = function () {

        drawWheelCanvas('wheelCanvas', turnWheel, 700, 700);
        var getAward = document.getElementById("getAward");
        var index = 0; // 中奖将品的数组下标
        getAward.addEventListener("click", function () {
            if (turning) {
                return;
            }
            turning = true;
            index = Math.floor(Math.random() * turnWheel.reaward.length);
            wheelCanvas.classList.add("transition");
            twinkle(() => {
                smoke.alert(`<p>恭喜抽到${turnWheel.reaward[index].name}</p><img style="width:200px;margin-top:10px" src="${turnWheel.reaward[index].icon}" />`,//第一个参数提示内容
                    function () {
                        wheelCanvas.style.transform = 'rotate(0deg)';
                    },//第二个参数回调函数
                    { ok: "确定" });//第三个参数按钮的属性
            });
            rotateWheel(index, turnWheel.reaward.length)
        })
    };

    // 转盘灯闪烁 callback为抽奖结果后执行函数
    function twinkle(callback) {
        let wheel = document.querySelector('.wheel');
        let pointer = document.querySelector('.pointer');

        pointer.classList.remove('pointer-animation');
        timer = setInterval(() => {
            wheel.classList.toggle('wheel-light');
        }, 200);
        setTimeout(() => {
            turning = false;
            wheelCanvas.classList.remove('transition');
            wheel.classList.remove('wheel-light');
            pointer.classList.add('pointer-animation');
            timer && clearInterval(timer);

            typeof callback === 'function' && callback();

        }, 2000);
    }
    // 获取像素比 高清cavas
    function getPixelRatio(context) {

        var backingStore = context.backingStorePixelRatio ||

            context.webkitBackingStorePixelRatio ||

            context.mozBackingStorePixelRatio ||

            context.msBackingStorePixelRatio ||

            context.oBackingStorePixelRatio ||

            context.backingStorePixelRatio || 1;

        return (window.devicePixelRatio || 1) / backingStore;

    };
    // 旋转转盘 (index:中奖将品的数组下标)
    function rotateWheel(awardIndex, awardCount) {
        let baseAngle = 360 / awardCount;
        let rotateRound = 360 * 5; // 每次旋转5圈
        wheelCanvas.style.transform = 'rotate(' + ((360 - (baseAngle * awardIndex)) + rotateRound) + 'deg)';
    }
    // 绘制转盘
    function drawWheelCanvas(canvasId, turnWheel, _w = 700, _h = 700) {
        let canvas = document.getElementById(canvasId);
        let baseAngle = Math.PI * 2 / (turnWheel.reaward.length);
        let ctx = canvas.getContext("2d");
        let _ratio = getPixelRatio(ctx);
        let canvasW = canvas.width = _w * _ratio;// 画板的高度
        let canvasH = canvas.height = _h * _ratio; // 画板的宽度
        canvas.style.width = _w + 'px';
        canvas.style.height = _h + 'px';
        ctx.scale(_ratio, _ratio);
        ctx.fillStyle = "#fff000";
        ctx.clearRect(0, 0, canvasW, canvasH);//去掉背景默认的黑色
        ctx.font = '26px Microsoft YaHei';
        for (let index = 0; index < turnWheel.reaward.length; index++) {
            let angle = index * baseAngle - baseAngle / 2 - Math.PI / 2;
            let rewardName = turnWheel.reaward[index].name;
            let translateX = _w * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
            let translateY = _h * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
            ctx.fillStyle = turnWheel.colors[index];
            ctx.beginPath();
            ctx.arc(_w * 0.5, _h * 0.5, Math.min(_w / 2, _h / 2), angle, angle + baseAngle, false);
            ctx.lineTo(_w * 0.5, _h * 0.5);
            ctx.fill();
            ctx.save();
            ctx.fillStyle = turnWheel.fontColor;
            ctx.translate(translateX, translateY);
            ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
            ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 100);
            //添加对应图标
            if (turnWheel.reaward[index] && turnWheel.reaward[index].icon) {

                ctx.drawImage(turnWheel.reaward[index].iconImg, -40, 140, 80, 80);
            }

            ctx.restore(); //很关键
        }
    }
</script>

</html>